<template>
  <div class="">
    
    <div class="setbox">
      <div style="padding:10px 0 0 10px">修改密码</div>
      <div class="setform">
      <el-form ref="ruleForm2" :model="ruleForm2" :rules="rules" label-position="left" label-width="80px" style="width:450px;">
        <el-form-item label="账号:"  >
           {{ruleForm2.account_name}}
        </el-form-item>
        <el-form-item label="原密码:" prop="olderPsw">
          <el-input type="password" v-model="ruleForm2.olderPsw"></el-input>
        </el-form-item>
        <el-form-item label="修改密码:" prop="newPsw">
          <el-input type="password" v-model="ruleForm2.newPsw"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%" @click="goHome('ruleForm2')">确认修改</el-button>
        </el-form-item>
      </el-form>
     
      </div>
    </div>
  </div>
</template>

<script>
  import crypto from 'crypto'
  import Http from '@/Http/Http'
  export default {

    data() {
       const account_name = (rele,value,callback) => {
        if(value ===''){
          return callback(new Error('请输入门店名称'))
        } else {
          callback()
        }
      }
      const olderPsw = (rele,value,callback) => {
        if(value ===''){
          return callback(new Error('请输入密码'))
        } else {
          callback()
        }
      }
      const newPsw = (rele,value,callback) => {
        if(value ===''){
          return callback(new Error('请输入密码'))
        } else if(value.length < 6) {
          return callback(new Error('密码至少6位数字或字母组合'))
        }else{
          callback()
        }
      }
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.newPsw) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
          account_name:'',
          olderPsw:'',
          newPsw:'',
          checkPass:''
        },
        rules:{
          
          olderPsw:[
            {validator:olderPsw,trigger:'blur'}
          ],
          newPsw:[
            {validator:newPsw,trigger:'blur'}
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
      }
    },
    created(){
      this.ruleForm2.account_name = sessionStorage.getItem('userName')
    },
    methods: {
     goHome(val){
      
       this.$refs[val].validate( (valid) => {
          const md5 = crypto.createHash("md5");
          md5.update(this.ruleForm2.olderPsw);
          const old_Password = md5.digest('hex');
          
          const md5a = crypto.createHash("md5");
          md5a.update(this.ruleForm2.newPsw);
          const new_Password = md5a.digest('hex');
         Http.editPsw({
           "old_Password":old_Password,
           "new_Password":new_Password
         })
         .then( res => {
           if ( res.data.code == 200){
             this.$message.success('密码修改成功')
             //this.$router.push('/')
           } else {
              this.$message.error(`修改失败,原因${res.data.message}`);
           } 
         })
       })
     }
    }
  }
</script>
<style>
.setbox{
  /* display: flex;
  justify-content: center;
  align-items: center; */
  width: 560px;
  margin: 50px 0 0 100px;
  background: #fff;
  
  border-radius: 10px;
}
.setform{
  padding: 30px;
}
</style>

